<!DOCTYPE html>
<html>
  <head>
    <title>Redis 遥控遥测</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        background-color: #f4f4f4;
        margin: 0;
        padding: 0;
      }
      .container {
        max-width: 1500px;
        margin: 20px auto;
        background-color: #fff;
        border: 1px solid #ccc;
        border-radius: 5px;
        padding: 20px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      }
      .table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 20px;
      }
      .table th,
      .table td {
        padding: 10px;
        border-bottom: 1px solid #ddd;
        text-align: left;
      }
      .table th {
        background-color: #f2f2f2;
      }
      .row {
        display: flex;
        justify-content: space-between;
      }
      .column {
        flex-basis: 30%;
      }
      .popup {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 10%; /* 占屏幕高度的 1/10 */
        background-color: #f9f9f9;
        box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .ip-input {
        margin-right: 10px;
      }
      .ip-button {
        padding: 10px 20px;
        background-color: #4caf50;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
      }
      
      .cmd-input {
        margin-right: 10px;
      }
      .cmd-button {
        padding: 10px 20px;
        background-color: #4caf50;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
      }
      .spacer {
        margin-left: 20px; /* 左侧留出 20px 的空白 */
        margin-right: 20px; /* 右侧留出 20px 的空白 */
      }
      #ip_label {
        margin-right: 10px;
      }
      #ip_value {
        margin-right: 20px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>遥控遥测列表</h1>

      <div class="row">
        <div class="column">
          <table class="table">
            <tr>
              <th>遥测</th>
              <th>数值</th>
            </tr>

            <tbody id="table0"></tbody>
          </table>
        </div>
        <div class="column">
          <table class="table">
            <tr>
              <th>遥测</th>
              <th>数值</th>
            </tr>

            <tbody id="table1"></tbody>
          </table>
        </div>
        <div class="column">
          <table class="table">
            <tr>
              <th>遥测</th>
              <th>数值</th>
            </tr>
            <tbody id="table2"></tbody>
          </table>
        </div>
      </div>
      <div style="height: 50px;"></div>
    </div>
    <div class="popup">
      <div class="ip">
        <label id="ip_lable">IP地址：</label>
        <label id="ip_value">127.0.0.1</label>
        <input id="ip_input" type="text" class="popup-input" placeholder="请输入内容" />
        <button class="ip-button">设定</button>
      </div>

      <div class="spacer"></div> <!-- 添加空白 -->
      <div class="command">
        <input id="cmd_input" type="text" class="popup-input" placeholder="请输入内容" />
        <button class="cmd-button">发送</button>
      </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
      function getip() {
        $.get('/get_ip', function (ip) {
          console.log('ip = ', ip)
          var label = document.getElementById('ip_value')
          label.innerHTML = ip
        })
      }
      window.onload = function () {
        // 在页面加载完成后执行的代码
        console.log('页面加载完成！')
        getip()
      }
      $(document).ready(function () {
        function getData() {
          $.get('/get_table_data', function (tableData) {
            // 更新页面上的表格数据
      
            $('#table0').empty() // 清空表格数据
            $('#table1').empty() // 清空表格数据
            $('#table2').empty() // 清空表格数据
            var data = tableData[0]
            for (var key in data) {
              var row = $('<tr>')
              row.append($('<td>').text(key))
              row.append($('<td>').text(data[key]))
              $('#table0').append(row)
            }
            data = tableData[1]
            for (var key in data) {
              var row = $('<tr>')
              row.append($('<td>').text(key))
              row.append($('<td>').text(data[key]))
              $('#table1').append(row)
            }
            data = tableData[2]
            for (var key in data) {
              var row = $('<tr>')
              row.append($('<td>').text(key))
              row.append($('<td>').text(data[key]))
              $('#table2').append(row)
            }
          })
        }
      
        $('.ip-button').click(function () {
          var inputElement = document.getElementById('ip_input')
          var ip = inputElement.value
          var ip_data = 'ip'
      
          $.ajax({
            type: 'POST',
            url: '/set_ip',
            contentType: 'application/json',
            data: JSON.stringify({ ip: ip }),
            success: function (response) {
              console.log('处理结果为：', response.result)
              getip()
            },
            error: function (xhr, status, error) {
              console.error('发生错误：', error)
            }
          })
        })
      
        $('.cmd-button').click(function () {
          //var cmd = $('.cmd-input').val() // 获取输入框中的 IP
          var inputElement = document.getElementById('cmd_input')
          var cmd = inputElement.value
          $.ajax({
            url: '/send_cmd',
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify({ cmd: cmd }), // 将 IP 作为 JSON 数据发送到后端
            success: function (response) {
              //alert(response.message) // 在成功响应时弹出提示框
            },
            error: function (xhr, status, error) {
              console.error('Error:', error) // 在请求失败时输出错误信息到控制台
            }
          })
        })
        setInterval(getData, 1000)
        // setInterval(getip, 1000)
      })
    </script>
  </body>
</html>
